<fieldset class="section">
    <legend>Danh sách người bán</legend>
    <input id="txtTimDaiLy" onkeydown="CongNoMuaHang.TimDaiLy(this, event);" placeholder="Nhập tên đại lý hoặc số điện thoại" style="width: 500px;">
    <h4 style="margin-top: 5px;">Click chọn hàng trong bảng bên dưới để xem thông tin</h4>
    <table class="table-views" style="margin-top: 10px;">
        <colgroup>
            <col style="width: 50px;">
            <col style="width: 250px;">
            <col style="width: 250px;">
        </colgroup>
        <thead>
        <tr>
            <td>STT</td>
            <td>Tên/Đại lý</td>
            <td>Số điện thoại</td>
            <td>Địa chỉ</td>
        </tr>
        </thead>
    </table>
    <div style="max-height: 200px; overflow-y: auto;">
        <table class="table-views">
            <colgroup>
                <col style="width: 50px;">
                <col style="width: 250px;">
                <col style="width: 250px;">
            </colgroup>
            <tbody>
            <tr class="default-row" style="display: none;" onclick="CongNoMuaHang.XemChiTiet(this);">
                <td class="congno" style="display: none;"></td>
                <td class="stt" style="text-align: center;"></td>
                <td class="daily"></td>
                <td class="sodienthoai" style="text-align: center;"></td>
                <td class="diachi"></td>
            </tr>
            <tr class="tr-loading">
                <td colspan="4" style="text-align: center;">
                    <span class="fa fa-spin fa-refresh"></span> Đang tải danh sách...
                </td>
            </tr>
            </tbody>
            <tbody id="container">

            </tbody>
        </table>
    </div>
</fieldset>

<fieldset class="section" style="margin-top: 30px;">
    <legend>Thông tin đại lý</legend>
    <table class="table-tools">
        <colgroup>
            <col style="width: 100px;">
            <col>
        </colgroup>
        <tr>
            <td>Tên</td>
            <td>
                <input type="text" id="txtTenDaiLy" />
            </td>
        </tr>
        <tr>
            <td>Số điện thoại</td>
            <td>
                <input type="text" id="txtSoDienThoai" />
            </td>
        </tr>
        <tr>
            <td>Địa chỉ</td>
            <td>
                <input type="text" id="txtDiaChi" />
            </td>
        </tr>
    </table>

    <button type="button" onclick="CongNoMuaHang.ThemDaiLy(this);" id="buttonThemDaiLy" style="margin-top: 10px;"><span class="fa-loading fa fa-spin fa-refresh" style="display: none;"></span> Thêm đại lý mới</button>
    <button type="button" onclick="CongNoMuaHang.LamMoi();" disabled id="buttonLamMoi" style="margin-top: 10px;">Làm mới</button>
</fieldset>

<fieldset class="section" style="margin-top: 30px;">
    <legend>Thông tin công nợ</legend>
    Tổng nợ: <input type="text" value="0" id="txtTongNo" readonly />
    <table class="table-views" style="margin-top: 10px;">
        <colgroup>
            <col style="width: 50px;">
            <col style="width: 250px;">
            <col style="width: 250px;">
            <col>
        </colgroup>
        <thead>
            <tr>
                <td style="text-align: center">STT</td>
                <td style="text-align: center">Thời gian</td>
                <td style="text-align: center">Số tiền</td>
                <td style="text-align: center">Ghi chú</td>
            </tr>
        </thead>
    </table>

    <div style="max-height: 200px; overflow-y: auto;">
        <table class="table-views">
            <colgroup>
                <col style="width: 50px;">
                <col style="width: 250px;">
                <col style="width: 250px;">
                <col>
            </colgroup>
            <tbody>
            <tr class="default-row" style="display: none;">
                <td class="stt" style="text-align: center;"></td>
                <td class="thoigian"></td>
                <td class="sotien" style="text-align: center;"></td>
                <td class="ghichu"></td>
            </tr>
            <tr class="tr-loading" style="display: none;">
                <td colspan="4" style="text-align: center;">
                    <span class="fa fa-spin fa-refresh"></span> Đang tải danh sách...
                </td>
            </tr>
            </tbody>
            <tbody id="container-giaodich">

            </tbody>
        </table>
    </div>

</fieldset>

<fieldset class="section" style="margin-top: 30px;">
    <legend>Giao dịch</legend>
    <table class="table-tools">
        <colgroup>
            <col style="width: 100px;">
            <col>
        </colgroup>
        <tr style="display: none;">
            <td></td>
            <td>
                <input type="hidden" id="txtMaDaiLy" value="-1">
            </td>
        </tr>
        <tr>
            <td>Tên đại lý</td>
            <td id="TenDaiLy">...</td>
        </tr>
        <tr>
            <td>Số tiền
            </td>
            <td>
                <input type="text" id="txtSoTien" disabled /> (nợ nhập số > 0 (<b>số dương</b>), trả nhập số < 0 (<b>số âm</b>))
            </td>
        </tr>
        <tr>
            <td>Ghi chú</td>
            <td>
                <textarea id="txtGhiChu" disabled style="width: 500px; height: 100px; resize: none;"></textarea>
            </td>
        </tr>
    </table>
    <button type="button" onclick="CongNoMuaHang.GiaoDich(this);" disabled id="buttonGiaoDich" style="margin-top: 10px;"><span class="fa-loading fa fa-spin fa-refresh" style="display: none;"></span> Thêm giao dịch</button>

</fieldset>

<script>
    CongNoMuaHang.DanhSachDaiLy();

    $("#txtSoTien").autoNumeric(
        'init', {aSep: ',', mDec: '0', vMax: '999999999999999', vMin: '-999999999999999'}
    );
</script>